<template>
  <div class="echarts" style="height: 100%; overflow: auto">
    <div style="padding: 10px">
      <el-row :data="api_result" :gutter="12">
        <el-col :span="6">
          <el-card shadow="always" body-style="{ padding: '10px' }">
            <div>
              <p>近一周接口执行通过：</p>
              <p style="text-align: center; font-weight: bold; font-size: 20px">{{ api_result.run_true }} 个</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div>
              <p>近一周接口执行失败：</p>
              <p style="text-align: center; font-weight: bold; font-size: 20px">{{ api_result.run_fail }} 个</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div>
              <p>近一月接口新增总数：</p>
              <p style="text-align: center; font-weight: bold; font-size: 20px">{{ api_result.mouth_add_count }} 个</p>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="always">
            <div>
              <p>接口总数：</p>
              <p style="text-align: center; font-weight: bold; font-size: 20px">{{ api_result.all_case_count }} 个</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div style="padding: 10px">
      <el-row :gutter="12">
        <el-col :span="12">
          <el-card shadow="always">
            <div v-if="isShowEcharts" id="baseEcharts2" style="width: 100%; height: 300px; padding-top: 10px" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="always">
            <div v-if="isShowEcharts" id="baseEcharts23" style="width: 100%; height: 300px; padding-top: 20px" />
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div style="padding: 10px">
      <el-row :gutter="12">
        <el-col :span="12">
          <el-card shadow="always">
            <div v-if="isShowEcharts" ref="Appcharts1" style="width: 100%; height: 300px; padding-top: 10px" />
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="always">
            <div v-if="isShowEcharts" ref="Appcharts2" style="width: 100%; height: 300px; padding-top: 20px" />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { get_chart, get_user_chart, get_api_chart, app_ui_run_count, app_script_user } from "@/api/common";
export default {
  name: 'Dashboard',
  data() {
    return {
      name: "",
      isShowEcharts: true,
      // 需要合并的数据
      options: {},
      api_result: {}
    }
  },
  computed: {
    ...mapGetters([
    ]),
  },
  created() {
    this.is_login()
    this.name = localStorage.getItem("username")
    this.isShowEcharts = true
    this.drawEcharts();
    this.get_api_result()
    this.get_app_run_total()
    this.get_app_user_total()
  },
  mounted() {
    this.isShowEcharts = true
    this.drawEcharts()
    this.user_drawEcharts()
  },
  methods: {
    is_login() {
      // eslint-disable-next-line no-prototype-builtins
      if (localStorage.hasOwnProperty("user_id") === false || localStorage.getItem("user_id") === '') {
        this.$router.push("/login")
        this.$message.error("未登录，请前往登录")
      }
    },
    drawEcharts() {
      if (!document.getElementById('baseEcharts2')) return
      const myChart = this.$echarts.init(document.getElementById('baseEcharts2'))
      get_chart().then(res => {
        const options = {
          title: {
            text: "七日内新增接口统计图表"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#E9EEF3"
              }
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: res.data.date,
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: res.data.content,
              type: 'line',
            },
          ],
        }
        myChart.setOption(options)
      })
    },
    user_drawEcharts() {
      if (!document.getElementById('baseEcharts23')) return
      const myChart = this.$echarts.init(document.getElementById('baseEcharts23'))
      get_user_chart().then(res => {
        const options = {
          title: {
            text: "用户录入接口统计表"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#E9EEF3",
              }
            }
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: res.data.user_list,
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: res.data.case_list,
              type: 'bar',
              barWidth: '25%',
              itemStyle: {
                color: 'rgba(253,0,38,0.56)', // 柱子颜色
              },
              label: {
                show: true,
                position: 'top',
              }
            },
          ],
        }
        myChart.setOption(options)
      })
    },
    get_api_result() {
      get_api_chart().then(res => {
        if (res.data.code === 200) {
          this.api_result = res.data
          console.log(res.data)
        }
      })
    },
    get_app_run_total() {
      app_ui_run_count().then(res => {
        if (res.data.code === 200) {
          console.log(res.data)
          const chart1 = this.$echarts.init(this.$refs.Appcharts1)
          const options1 = {
            title: {
              text: "App自动化脚本执行结果统计"
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#E9EEF3"
                }
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: res.data.date,
            },
            yAxis: {
              type: 'value',
            },
            series: [
              {
                name: "成功",
                data: res.data.result_true,
                type: 'line',
                color: "#1e7b14"
              },
              {
                name: "失败",
                data: res.data.result_false,
                type: 'line',
                color: "#e30d0d"
              },
            ],
          }
          chart1.setOption(options1)
          window.addEventListener('resize', function() {
            chart1.resize();
          })
        }
      })
    },
    get_app_user_total() {
      app_script_user().then(res => {
        if (res.data.code === 200) {
          const chart1 = this.$echarts.init(this.$refs.Appcharts2)
          const options1 = {
            title: {
              text: "用户录入APP自动化脚本统计表"
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#E9EEF3"
                }
              }
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: res.data.user_list,
            },
            yAxis: {
              type: 'value',
            },
            series: [
              {
                name: "条",
                data: res.data.script_list,
                type: 'line',
              },
            ],
          }
          chart1.setOption(options1)
          window.addEventListener('resize', function() {
            chart1.resize();
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
